<div id="repeatablejs">
	<form id="jform-test">
		<div id="jform_test_container">
			<div id="jform_test_modal" class="modal hide" aria-hidden="true">
				<table>
					<thead>
						<tr>
							<th>Test label 1</th>
							<th>Test label 2</th>
							<th><a href="#" class="add">Add new after</a></th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td><input id="field1" type="text" name="field1" /></td>
							<td><input id="field2" type="text" name="field2" /></td>
							<td>
								<a href="#" class="remove">Remove</a>
							</td>
						</tr>
					</tbody>
				</table>
				<a href="#" class="close-modal">Close</a>
				<a href="#" class="save-modal-data">Save and Close</a>
			</div>
		</div>
		<button id="jform_test_button" >Open modal</button>
		<input type="hidden" name="jform[test]" id="jform_test" value=""
			class="form-field-repeatable"
			data-container="#jform_test_container"
			data-modal-element="#jform_test_modal"
			data-repeatable-element="table tbody tr"
			data-bt-add="a.add" data-bt-remove="a.remove"
			data-bt-modal-open="#jform_test_button"
			data-bt-modal-close="a.close-modal"
			data-maximum="3" data-input="#jform_test"
		/>
	</form>

</div>
